<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            background: #34495e;
        }

        .box {
            width: 300px;
            padding: 40px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #191919;
            text-align: center;
        }
        .box h1 {
             color: white;
             text-transform: uppercase;
             font-weight: 500;
         }

         .box input[type="text"],
         .box input[type="password"] {
             border: 0;
             background: none;
             display: block;
             margin: 20px auto;
             text-align: center;
             border: 2px solid #3498db;
             padding: 14px 10px;
             width: 200px;
             outline: none;
             color: white;
             border-radius: 24px;
             transition: 0.25s;
         }

         .box input[type="text"]:focus,
         .box input[type="password"]:focus {
             width: 280px;
             border-color: #2ecc71;
         }
         .box input[type="submit"],input[type="button"] {
           border: 0;
           background: none;
           display: block;
           margin: 20px auto;
           text-align: center;
           border: 2px solid #2ecc71;
           padding: 14px 40px;
           outline: none;
           color: white;
           border-radius: 24px;
           transition: 0.25s;
       }

       .box input[type="submit"]:hover {
           background: #2ecc71;
       }
        .box input[type="button"]:hover {
           background: #2ecc71;
       }

   </style>
</head>
<body>
   <form class="box" action="" method="post">
       <h1>Login</h1>
       <input type="text" name="name" id='text' placeholder="用户名">
       <input type="password" name="password" id='password' placeholder="用户密码">
       <input type="submit" name="login" value="登录">
       <a href="/template/ZC/ZC.html">
           <input type="button" name = "enroll" value="注册">
       </a>
   </form>
</body>

</html>